<template>
  <router-layout>
    <div class="medal me">
      <div class="medal-container">
        <div class="title-box">
          <div class="swipe-box2">
            <van-swipe :autoplay="0" :initial-swipe='nativeIndex' @change="touchChange" :show-indicators="false">
              <van-swipe-item v-for="(item, index) in medalList" :key="index" class="swipe-box">
                <div class="img-box">
                  <img width="80px" height="80px" :src="item.medalrank_img">
                  <p class="detail-text">{{ item.medalrank_name }}</p>
                </div>
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="none-style" v-if="medalList.length == 1">
            <p :class="medalList[0].isgain !== 1?'van-step-box':'van-step-box2'">{{'Lv' + medalList[0].rank}}</p>
            <van-icon v-if="medalList[0].isgain == 1" class="van-step-box3" name="checked" />
          </div>
          <van-steps v-else :active="active">
            <van-step v-for="(item,index) in medalList" :key="index">{{ 'Lv' + item.rank }}</van-step>
          </van-steps>
        </div>
        <div class="content-box">
          <div class="content-container">
            <p class="name-text">
              任务
              <!-- <span>({{ InfoList.gain_nums || 0 }}/{{ InfoList.all_nums || 0 }})</span> -->
            </p>
            <div class="detailed-box">
              <div class="my-icon" v-for="(it, index) in taskList" :key="index">
                <div class="img-data">
                   <img :src="it.task_img" width="100%" height="100%" alt>
                </div>
                <div class="my-text-box">
                  <p class="my-text">{{ it.medal_desc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </router-layout>
</template>

<script>
import { medal_listAllMy, medal_findByMedalId } from "@/api/medal";
import TitleItem from "../../components/public/title/title";
export default {
  name: "MedalDetails",
  components: { TitleItem },
  data() {
    return {
      dataInfo: {},
      active: 0,
      InfoList: [],
      medalList: [],
      taskList:[],
      nativeIndex: this.$route.query.index
    };
  },
  methods: {
    touchChange(index){
      this.$route.query.medalrank_id = this.medalList[index].medalrank_id;
      this.medalaccount()
    },
    //获取总的勋章数据
    async initList() {
      let query = Object.assign({
        company_id: localStorage.getItem("companyId") - 0
      });
      let res = await medal_listAllMy(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows;
        this.InfoList = {};
        for (var i = 0; i < result.data.rows.length; i++) {
          let ele = result.data.rows[i];
          if (ele.id == this.$route.query.id) {
            this.InfoList = ele;
            this.active = ele.gain_nums - 0 - 1;
            this.medalList = ele.medalranks;
          }
        }
      }
    },
    async medalaccount() {
      let query = Object.assign({
        id: this.$route.query.medalrank_id,
        company_id: localStorage.getItem("companyId") - 0
      });
      let res = await medal_findByMedalId(query);
      let result = res.data;
      if (result.status == 100) {
        this.taskList = result.data.medalrankConditions
      }
    }
  },
  created() {
    this.initList();
    this.medalaccount()
  }
};
</script>

<style lang="scss" scoped>
@import "MedalDetails";
.img-box{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.img-data {
  width: 80px;
  height: 80px;
}
.detail-text {
  text-align: center;
}
.van-step-box{
  text-align: center;
  color: #969799;
  padding-top: 10px;
  font-size: 12px;
}
.van-step-box2 {
  text-align: center;
  color: rgb(7, 193, 96);
  padding-top: 10px;
  font-size: 12px;
}
.van-step-box3 {
  text-align: center;
  color: rgb(7, 193, 96);
  padding-top: 6px;
  font-size: 12px;
  line-height: 12px;
}
</style>
